<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="user-container">
      <el-row>
        <el-col :span="8">
          <!-- 按钮 -->
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
          >
            添加文章
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelSelected"
          >
            删除选中
          </el-button>
        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            v-model="keywords"
            size="small"
            placeholder="请输入需要查找分类"
            @keyup.enter.native="handleSearch"
          >
          </el-input>
          <el-button type="primary" size="mini" @click="handleSearch">
            搜索
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table highlight-current-row :data="posts" stripe border>
      <el-table-column label="选择" width="50px" prop="selected">
        <template v-slot="check">
          <input
            type="checkbox"
            @change="handleSelect(check.row)"
            :checked="Boolean(check.row.selected)"
          />
        </template>
      </el-table-column>
      <el-table-column label="id" width="50" prop="id"></el-table-column>
      <el-table-column label="作者" width="100" prop="author"></el-table-column>
      <el-table-column label="文章标题" prop="title"></el-table-column>
      <el-table-column label="文章类别" prop="type"></el-table-column>
      <el-table-column label="点击量" prop="click"></el-table-column>
      <el-table-column label="操作" width="250px">
        <template v-slot="scoped">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="handleModify(scoped.row)"
            >编辑文章</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(scoped.row)"
            >删除文章</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Post',
  data() {
    return {
      keywords: '',
      posts: [],
      page: 1,
      size: 5,
      total: 0,
      //单选是否选中
      checked: null,
      cardForm: {
        code: '',
      },
      isSearch: false,
    }
  },
  created() {
    this.getPosts()
  },
  methods: {
    handleDelSelected() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.delSelectArticles().then((res) => {
            const { code, message, result } = res.data
            if (code == 0) {
              this.$message.success(message)
              if (this.isSearch == true) {
                this.getSearch()
              } else {
                this.getPosts()
              }
            } else {
              this.$message.error(message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      // console.log('我删除了选中')
    },
    handleSelect(row) {
      if (row.selected == 0) {
        row.selected = 1
      } else {
        row.selected = 0
      }
      this.$api.putArticlesSelect(row)
    },
    getPosts() {
      this.$api.getAllArticles(this.page, this.size).then((res) => {
        // console.log(res)
        this.posts = res.data.result.data
        this.total = res.data.result.total
      })
    },
    handleCurrentChange(p) {
      this.page = p
      if (this.isSearch == false) {
        this.getPosts()
      } else {
        this.getSearch()
      }
    },
    handleSizeChange(s) {
      this.size = s
      if (this.isSearch == false) {
        this.getPosts()
      } else {
        this.getSearch()
      }
    },
    getSearch() {
      this.$api
        .getSearchArticles(this.page, this.size, this.keywords)
        .then((res) => {
          // console.log(res)
          this.posts = res.data.result.data
          this.total = res.data.result.total
        })
    },
    handleAdd() {
      // 跳转页面
      this.$router.push('/post/postadd')
    },
    handleModify(row) {
      // 跳转页面
      this.$router.push(`/post/revision?id=${row.id}`)
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.delOneArticle(row.id).then((res) => {
            const { code, message, result } = res.data
            if (code == 0) {
              this.$message.success(message)
              if (this.isSearch == true) {
                this.getSearch()
              } else {
                this.getPosts()
              }
            } else {
              this.$message.error(message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleSearch() {
      if (this.keywords == '') {
        this.getPosts()
      } else {
        this.isSearch = true
        this.getSearch()
      }
    },
  },
}
</script>

<style scoped>
/* scoped:(作用域) 在这里写的样式仅仅会影响当前组件 */
.user-container {
  margin-top: 20px;
  min-width: 700px;
  /* height: 400px; */
}
.el-input {
  width: 70%;
  margin-right: 10px;
}
</style>
